<template>
	<view class="container">
		<view class="main">
			<view class="header" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu=#/member/info?i=41&type=1&shop_id&mid=4')">
				<view class="header-img">
					<image :src="member_info.avatar" mode="aspectFill"></image>
				</view>
				<view class="header-info">
					<view class="header-info-name">
						<view>{{ member_info.nickname }}</view>
						<view>ID:{{ member_info.member_id }}</view>
					</view>
					<image style="width: 12rpx;height: 25rpx;" src="@/static/my/right2.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="lv">
				<view class="lv-left">我的等级：{{ member_info.level_name }}</view>
				<view class="lv-right" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu#/newDiy?page_id=123&i=41')">
					<view>升级</view>
					<image src="@/static/my/right3.png" mode="aspectFill"
						style="width: 12rpx;height: 25rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
			<view class="balance">
				<view class="balance-left" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu#/member/balance?i=41&type=5&shop_id&mid=4')">
					<view>
						<text class="title">我的余额</text>
						<image src="@/static/my/right1.png" mode="aspectFill" style="width: 7rpx;height: 18rpx;">
						</image>
					</view>
					<view class="price">{{ balance }}</view>
				</view>
				<view class="balance-right" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu#/member/extension?i=41&type=5&shop_id&mid=4')">
					去提现
				</view>
			</view>
			<view class="box">
				<view class="box-header" @click="handleDaiKuan('')">
					<view class="box-header-left">我的贷款</view>
					<view class="box-header-right">
						<text style="margin-right: 10rpx;">全部</text>
						<image src="@/static/my/right2.png" mode="aspectFill" style="width: 12rpx;height: 25rpx;">
						</image>
					</view>
				</view>
				<view class="box-nav">	
					<view class="box-nav-item" @click="handleDaiKuan(1)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/shenqing.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							申请中
						</view>
					</view>
					<view class="box-nav-item" @click="handleDaiKuan(2)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/shenpi.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							已授信
						</view>
					</view>
					<view class="box-nav-item" @click="handleDaiKuan(3)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/jujue.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							已拒绝
						</view>
					</view>
					<view class="box-nav-item" @click="handleDaiKuan(4)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/chenggong.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							已放款
						</view>
					</view>
					<view class="box-nav-item" @click="handleDaiKuan(6)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/shibai.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							逾期中
						</view>
					</view>
					<view class="box-nav-item" @click="handleDaiKuan(7)">
						<view class="box-nav-item-icon">
							<image src="@/static/my/tijiao.png" mode="aspectFill"></image>
						</view>
						<view class="box-nav-item-name">
							已提交
						</view>
					</view>
				</view>
			</view>
			<view class="gird">
				<view class="gird-item">
					<view class="gird-item-icon">
						<image src="@/static/my/haibao.png" mode="aspectFill"></image>
					</view>
					<view class="gird-item-name">
						我的海报
					</view>
				</view>
				<view class="gird-item" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu#/member/myrelationship?i=41')">
					<view class="gird-item-icon">
						<image src="@/static/my/tuandui.png" mode="aspectFill"></image>
					</view>
					<view class="gird-item-name">
						我的团队
					</view>
				</view>
				<view class="gird-item"  @click="goLink(keFuUrl)">
					<view class="gird-item-icon">
						<image src="@/static/my/kefu.png" mode="aspectFill"></image>
					</view>
					<view class="gird-item-name">
						联系客服
					</view>
				</view>
				<view class="gird-item" @click="goLink('https://jr.qichen168.com/addons/yun_shop/?menu=#/member/info?i=41&type=1&shop_id&mid=4')">
					<view class="gird-item-icon">
						<image src="@/static/my/shezhi.png" mode="aspectFill"></image>
					</view>
					<view class="gird-item-name">
						设置
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		watchEffect,
		onMounted
	} from 'vue'
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHttpApi
	} from '@/api/api.js'
	onLoad(()=>{
		getKefuUrl()
		getUserInfo()
		getBalanceInfo()
	})
	const handleDaiKuan = (id)=> {
		uni.navigateTo({
			url:`/pages/daiKuan/list?id=${id}`
		})
	}
	const member_info = ref({})
	// 获取用户信息
	const getUserInfo = ()=> {
		getHttpApi({
			route: 'member.member.member-data',
			version:"v1.1.143",
			basic_info: "1",
			validate_page: "1",
			mid: "10749"
		}).then(res=>{
			member_info.value = res.data.member_info
		})
	}
	// 获取余额
	const balance = ref(0)
	const getBalanceInfo = ()=> {
		getHttpApi({
			route: 'plugin.Shortplay.api.index.getwelfare',
			type:"7",
		}).then(res=>{
			balance.value = res.data.balance
		})
	}
	const goLink = (url)=> {
		window.location.href = url
	}
	// 获取客服配置
	const keFuUrl = ref('')
	const getKefuUrl = ()=> {
		getHttpApi({
			route: 'video.kefEwm',
			type: '7',
			uuid:'0'
		}).then(res=>{
			keFuUrl.value = res.data.kef_url
		})
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}
	.gird{
		display: flex;
		justify-content: space-between;
		background: #FFFFFF;
		padding: 24rpx 42rpx;
		border-radius: 20rpx;
		margin-top: 14rpx;
		&-item{
			text-align: center;
			&-icon{
				width: 48rpx;
				height: 48rpx;
				margin: auto;
			}
			&-name{
				font-weight: 350;
				font-size: 24rpx;
				color: #3D3D3D;
				line-height: 48rpx;
				margin-top: 10rpx;
			}
		}
	}
	.box{
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #FFF4F4;
		margin-top: 18rpx;
		&-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 22rpx;
			&-left{
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			&-right{
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #848383;
			}
		}
		&-nav{
			display: flex;
			justify-content: space-between;
			padding: 0 18rpx 36rpx;
			&-item{
				text-align: center;
				&-icon{
					width: 44rpx;
					height: 44rpx;
					margin: auto;
				}
				&-name{
					font-weight: 400;
					font-size: 24rpx;
					color: #081328;
					line-height: 26rpx;
					margin-top: 18rpx;
				}
			}
		}
	}
	.balance {
		background: linear-gradient(270deg, #1A64FF 0%, #6838F6 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx 26rpx;
		&-left {
			
		}

		&-right {
			width: 102rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			background: linear-gradient( 90deg, #F8D3B2 0%, #FDEDD7 100%);
			border-radius: 200rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #840822;
		}
	}
	.title{
		font-weight: 350;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
		margin-right: 12rpx;
	}
	.price{
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		margin-top: 18rpx;
	}
	.main{
		padding: 70rpx 25rpx;
	}
	.header {
		display: flex;
		justify-content: space-between;
		

		&-img {
			width: 118rpx;
			height: 118rpx;
			border-radius: 100%;
			overflow: hidden;
			margin-right: 22rpx;
		}

		&-info {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-name {
				&>view:nth-child(1) {
					font-weight: 500;
					font-size: 34rpx;
					color: #00040C;
					line-height: 24rpx;
					margin-bottom: 18rpx;
				}

				&>view:nth-child(2) {
					font-weight: 350;
					font-size: 20rpx;
					color: #00040C;
					line-height: 24rpx;
				}
			}
		}
	}

	.lv {
		background: linear-gradient(90deg, #E7C289 0%, #FFE3B7 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 68rpx;
		line-height: 68rpx;
		margin-top: 22rpx;
		padding: 0 24rpx;
		&-left {
			font-weight: 500;
			font-size: 26rpx;
			color: #530707;
		}
		&-right {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #450505;
		}
	}
</style>